import React, { Component } from 'react'
import { List, Toast  } from 'antd-mobile'
import axios from 'axios'
import { hashHistory } from 'react-router'
import '../../assets/css/home/k-news.less'
export default class Knews extends Component {
  state = {
    data: []
  }
  goToDetail = (id) => {
    Toast.show({icon:'loading',content:'加载中...',duration:500})
    setTimeout(() => {
      hashHistory.push('/detail/'+id)
    }, 500);
  }
  render() {
    return (
      <div className="k-news">
        <h2>相关资讯</h2>
        <List>
          {this.state.data.map((e, i) => {
            return (
              <List.Item key={i} onClick={ ()=>this.goToDetail(e.id) }>
                <img src={e.avatar} alt="" />
                <div className="content">
                  <div className="title">{e.title}</div>
                  <div className="desc">{e.subtitle}</div>
                </div>
              </List.Item>
            )
          })}
        </List>
      </div>
    )
  }
  async componentDidMount() {
    const resule = await axios.get('/data/news.json')
    const { data } = resule.data
    this.setState({
        data
    })
}
}
